<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    v-if="load"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="600"
    @close="close"
    :z-index="2000"
  >
    <template v-if="types == 'afresh'">
      <el-form :model="form" label-position="top">
        <el-form-item label="绩效模式" required>
          <el-radio-group v-model="form.mode" class="ml-4">
            <el-radio
              :label="item.value"
              size="large"
              v-for="(item, index) in options['report.ReportModeConfig']?.[0].modeText"
              :key="index"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请选择绩效月份">
          <el-date-picker
            style="width: 100%"
            v-model="form.performance_month"
            type="month"
            value-format="YYYY-MM"
            placeholder="请选择月份"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <div class="text-[#999999]">
          说明：系统每月定时执行一次，只允许选择当前月份及上月进行重新生成
        </div>
      </el-form>
    </template>
    <template v-if="types == 'configuration'">
      <el-form :model="form" label-position="left">
        <el-form-item label="绩效模式" required>
          <el-radio-group v-model="form.mode" class="ml-4" @change="changeMode">
            <el-radio
              :label="item.value"
              size="large"
              v-for="(item, index) in options['report.ReportModeConfig']?.[0].modeText"
              :key="index"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
          <div class="bg-[var(--base-small-bg-color)] px-2 py-2 w-full">
            <div>1.图片任务：上传图片绑定绩效标签（带分值），统计完成分值</div>
            <div>2.评分页面：设计、运营按任务完成质量进行评分，计算平均分</div>
            <div>3.绩效页面：完成分值+质量平均分，形成最后得分</div>
          </div>
        </el-form-item>
        <el-form-item label="任务完成率" required>
          <el-radio-group v-model="form.task_completion_rate" class="ml-4">
            <el-radio
              :label="item.value"
              size="large"
              v-for="(item, index) in options['report.ReportModeConfig']?.[0]
                .completionRateText"
              :key="index"
              >{{ item.label }}</el-radio
            >
            <!-- <el-radio :label="2" size="large">按部门分配周期</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="绩效考核人员" required>
          <select-personnel
            class="w-full"
            v-model="form.assessors"
            :multiple="true"
          ></select-personnel>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button class="ml-5" @click="close">取消</el-button>
      <el-button type="primary" @click="serveFun">保存</el-button>
    </template>
  </el-dialog>
</template>
<script name="pictureDialog" setup>
import { reactive, toRefs } from "vue";
import { modeConfig, modeConfigList, designRegenerate } from "../api/index.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { options } = toRefs(props);

const disabledDate = (time) => {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth() + 1;
  const selectedYear = time.getFullYear();
  const selectedMonth = time.getMonth() + 1;
  // 只允许选择当前月和上个月的日期，包括跨年情况
  return (
    !(
      selectedYear === currentYear &&
      (selectedMonth === currentMonth || selectedMonth === currentMonth - 1)
    ) && !(selectedYear === currentYear - 1 && selectedMonth === 12)
  );
};

const data = reactive({
  dialogVisible: false,
  title: "",
  types: null,
  form: {},
  config_list: [
    {
      id: 1,
      mode: 1,
    },
    {
      id: 2,
      mode: 2,
    },
    {
      id: 3,
      mode: 3,
    },
  ],
  load: false,
});

const { dialogVisible, title, types, form, config_list, load } = toRefs(data);

const operationType = new Map([
  ["afresh", "重新生成绩效"],
  ["configuration", "绩效模式配置"],
]);

const open = async (type) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  title.value = operationType.get(type);
  types.value = type;
  if (type == "configuration") {
    getModeConfigList();
  }
  dialogVisible.value = true;
};

const getModeConfigList = async () => {
  try {
    const res = await modeConfigList();
    if (res.data.length) {
      config_list.value = res.data;
    }
    const list = [];
    if (list[0]) form.value = Object.assign({}, list[0]);
  } catch (e) {
    throw Error(e);
  }
};

const changeMode = (val) => {
  const findItem = config_list.value.find((i) => i.mode == val);
  form.value = Object.assign({}, findItem);
};

const close = () => {
  form.value = {};
  dialogVisible.value = false;
};

const serveFun = () => {
  switch (types.value) {
    case "afresh":
      handleAfresh();
      break;
    case "configuration":
      handleConfiguration();
      break;
  }
};

const handleAfresh = async () => {
  try {
    const res = await designRegenerate(form.value);
    ElMessage.success("操作成功");
    close();
  } catch (e) {
    throw Error(e);
  }
};

const handleConfiguration = async () => {
  if (!form.value.mode) {
    ElMessage.error("请选择绩效模式");
    return;
  }
  if (!form.value.task_completion_rate) {
    ElMessage.error("请选择任务完成率");
    return;
  }
  if (!form.value.assessors) {
    ElMessage.error("请选择绩效考核人员");
    return;
  }
  try {
    const res = await modeConfig(form.value);
    ElMessage.success("操作成功");
    close();
  } catch (e) {
    throw Error(e);
  }
};

defineExpose({ open, close });
</script>
